<html>
<head>	
	<LINK href="./css/common.css" rel="stylesheet" type="text/css">
	<LINK href="./css/grid-editor.css" rel="stylesheet" type="text/css">
	
	<!-- INCLUDE MOSHU'S LIBRARY-->    
    <script type="text/javascript" src="./../Lib/Moshu.js"></script>
    <script type="text/javascript" src="./../Lib/2D/Moshu.Canvas2D.js"></script>	
	<!-- END MOSHU'S -->
	
	
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"></script>
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.min.js"></script>
	<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        var IE = false;
    </script>
    <!--[IF IE]>
    <script type="text/javascript">
        IE = true;
    </script>
<![endif]-->
</head>
<body>
	
	<div class="page">
		<div class="page-header ">
			<div class="title">
				<span>Moshu's Canvas Library - Flappy bird</span>		
			</div>		
			<div class="menu"></div>			
		</div>
	
	<div class="page-content" style="">
		<div class="controls-container resizable">
			<div class="properties">
                <div class="property">
                    No controls available
                </div>
                
			</div>
		</div>
		<div class="canvas-container resizable">
			<canvas width="800" height="500" id="c" style="border:2px solid black;background-image:url('./images/bird/pc4.png')"></canvas>
            <br />
            <center> <div id="distance" style="width:50px;overflow:hidden;"></div>  </center>
           
		</div>
		<div class="io-container section-title resizable">
			<div style="height:10%;">Code samples</div>
			<div id="output" style="width:100%; height:90%;overflow-y:scroll;background:white;color:black;padding-left:10px">
				<h2>Flappy bird</h2>
				Clone after the renound game Flappy Bird.
                <br /><br />
                Press any key to start playing.<br />
                Press up arrow to keep the bird in the air.
                <br /><br />
                Used features: ImageSprite, Rectangles, Dynamics
                <br /><br /><br /><br />		
			</div>
		</div>
	</div>
	<div class="page-footer">
	</div></div>
	<script type="text/javascript">
		$( ".menu" ).load( "partials/menu.html" );
		$( ".page-footer" ).load( "partials/footer.html" );
		//$(".resizable").resizable();
	</script>
	
	<script type="text/javascript">
	    var scene = new Moshu.Canvas2D.Scene("c");

	    function FlappyBird(scene) {
	        this.scene = scene;
	        this.groundHeight = 25;
	        this.birdWidth = 44.5;
	        this.birdHeight = 38;
	        this.openingHeight = 4 * this.birdHeight;
	        this.obstacleSpeed = -100;
	        this.startTime = 0;

	        
	        this.addEventSimple = function (elem, event, fn) {
	            if (elem.addEventListener) {
	                elem.addEventListener(event, fn, false);
	            } else {
	                elem.attachEvent("on" + event, function() {
	                    // set the this pointer same as addEventListener when fn is called
	                    return(fn.call(elem, window.event));   
	                });
	            }
	        }

	        this.initGround = function () {
	            var canvas = this.scene.canvas;
	            var groundHeight = this.groundHeight;
	            var ground = new Moshu.Canvas2D.Rectangle(0, canvas.height - groundHeight, canvas.width, canvas.height - groundHeight);
	            ground.fill.enabled = true;
	            ground.fill.color = "#0A1F33";
	            ground.id = "ground1";
	            this.scene.add(ground);

	            ground = new Moshu.Canvas2D.Rectangle(0, 0, canvas.width, groundHeight);
	            ground.fill.enabled = true;
	            ground.fill.color = "#0A1F33";
	            ground.id = "ground2";
	            this.scene.add(ground);
	        }
	        var self = this;
	        this.onCollision = function (collidingShape) {
	            shape = self.bird;
	            for (var i = 0; i < collidingShape.collisions.length; i++)
	            {
	                var col = collidingShape.collisions[i];
	                if (col.collider == shape || col.collidee == shape) {
	                    clearInterval(self.wallsInterval);
	                    clearInterval(self.birdInterval);
	                    self.scene.clear();
	                    self.init();
	                    alert("You are dead");
	                    return;
	                }
                    
	            }	            
	        }
	        this.movedCheck = function (args) {	            	            
	            if (args.target.name == "obstacle") {
	             
	                if (args.target.x < -args.target.width) {
	                    args.target.unbind("moved", self.movedCheck);
	                    //debugger;
	                    self.scene.remove(args.target);
	                    //args.target = null;
	                }
	            }
	            return true;
	        }

	        this.initBird = function () {
	            this.startTime = null;
	            this.birdHeight = 50;
	            this.openingHeight = 4 * this.birdHeight;
	            this.initialHeight = 4 * this.birdHeight;

	            this.obstacleSpeed = -300;

	            var canvas = this.scene.canvas;
	            var groundHeight = this.groundHeight;

                
	            
	            var self = this;
	            self.bird = new Moshu.Canvas2D.Sprite(150,200,self.birdWidth, self.birdHeight,1,4,self.birdWidth, self.birdHeight, "./images/bird/flappingBird.png")
	            self.bird.id = "bird";
	            
	            
	            self.scene.add(self.bird);

	            self.birdInterval = setInterval(function () {
	                self.bird.setNextSpriteOnRow();
	            },200);

	            this.addEventSimple(window, "keydown", function (e) {
	                var evt = (e) ? e : (window.event) ? window.event : null;
	                if (evt) {
	                    var key = (evt.charCode) ? evt.charCode : ((evt.keyCode) ? evt.keyCode : ((evt.which) ? evt.which : 0));	                    
	                    if (self.bird.acceleration.ay == 0)
	                        self.start();
	                    if (key == 38)
	                    {
	                        // up
	                        self.bird.velocity.dy = -200;
	                    }

                        
	                }
	            });	            
	            self.bird.bind("collision", self.onCollision);
	        }

	        this.totalDistance = 0;

	        this.start = function () {
	            this.totalDistance = 0;
	            this.bird.acceleration.ay = 200;
	            var self = this;
	            var movingCheck = function (args) {	                
	                var dt = args.dt;	                
	                self.totalDistance += dt * self.obstacleSpeed * -1 / 100;
	                $("#distance").html(Math.floor(self.totalDistance) + " m");	                	                    	                
	                return true;
	            }
	            var doAnimation = function () {
	                
	                var obstacleWidth = 50;
	                //console.log(self.openingHeight);
	                var totalHeight = self.scene.canvas.height - 2 * self.groundHeight - self.openingHeight;
	                var top = Math.floor((Math.random() * totalHeight) + 0);

	                var heightPercent = top / 396;

	                var topObstacle = new Moshu.Canvas2D.PartialCanvasImage(self.scene.canvas.width, self.groundHeight, obstacleWidth, top, "./images/bird/pc3.png");
	                topObstacle.name = "obstacle";
	                topObstacle.setClippingRectangle(0, 396 - 396 * heightPercent, 50, 396 * heightPercent);
	                topObstacle.velocity.dx = self.obstacleSpeed;
	                self.scene.add(topObstacle);

	                var bottomObstacle = new Moshu.Canvas2D.PartialCanvasImage(self.scene.canvas.width, self.scene.canvas.height - self.groundHeight - (totalHeight - top), obstacleWidth, totalHeight - top, "./images/bird/pc2.png");
	                bottomObstacle.name = "obstacle";
	                bottomObstacle.setClippingRectangle(0, 0, 50, (1 - heightPercent) * 396);
	                bottomObstacle.velocity.dx = self.obstacleSpeed;
	                self.scene.add(bottomObstacle);

	                topObstacle.bind("moving", movingCheck);
	                bottomObstacle.bind("moving", movingCheck);

	                topObstacle.bind("moved", self.movedCheck);
	                bottomObstacle.bind("moved", self.movedCheck);

	                topObstacle.bind("collision", self.onCollision);
	                bottomObstacle.bind("collision", self.onCollision);
	            }


	            this.wallsInterval = setInterval(doAnimation, 1500);
	            doAnimation();
	        }
	        

	        this.init = function () {
	            this.initGround();
	            this.initBird();
	            this.scene.invalidate();
	        }	       
	    }

	    var game = new FlappyBird(scene);
	    game.init();
	   
	    

	  
	</script>
</body>
</html>